<?PHP
include 'controller.php';

session_start();
if (!(isset($_SESSION['login']) && $_SESSION['login'] != '')) {
	header ("Location: login.php");
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Social User Profile Page in HTML5/CSS3[DEMO]</title>
	<link rel="stylesheet" type="text/css" href="global.css" />
	<script type="text/javascript">
		function updateTextInput(val) {
		  document.getElementById('textInput').value=val; 
		}
	</script>  
</head>

<body>
	<header>
	<?php
	$link = mysql_connect('localhost','root','');
	//(...)
	if($link == true){
	?>
		<div class="wrapper">
			<a href="#"><img src="img/Logo.jpg" alt="mysquare logo" title="mysquare - checkin and go home!" /></a>
			<div id="usernav">Hello, <a href="distribute_stars.php">Name (Click Me to Give Stars)!</a> | <a href="#">Settings</a> | <a href="logout.php">Logout<span><img src="img/user_avatar_s.jpg" /></span></a><br />
            <div id="userstarcount">Stars to give: X | Total stars earned: X</div>
			</div>
		</div>
	<?php
	} else {
	echo "Not connected";
	}
	?>
	</header>

	<nav>
		<ul id="n" class="clearfix">
			<li><a href="index.php">Homepage</a></li>
			<li class="sel"><a href="profile.php">Profile</a></li>
			<li><a href="#openModal">Give Star</a></li>
			<li><a href="#">Claim Reward</a></li>
			<li><a href="#">Search</a></li>
			<li><a href="#">Badges</a></li>
		</ul>
	</nav>

    <div id="openModal" class="modalDialog">
        <?PHP loadModal(); ?>
    </div>

	<div id="content" class="clearfix">
		<section id="left">
			<div id="userStats" class="clearfix">
				<div class="pic">
					<a href="#"><img src="img/user_avatar.jpg" width="150" height="150" /></a>
				</div>
				
				<div class="data">
					<h1>Johnny Appleseed</h1>
					<h3>San Francisco, CA</h3>
					<h4><a href="http://spyrestudios.com/">http://spyrestudios.com/</a></h4>
					<div class="socialMediaLinks">
						<a href="http://twitter.com/jakerocheleau" rel="me" target="_blank"><img src="img/twitter.png" alt="@jakerocheleau" /></a>
						<a href="http://gowalla.com/users/JakeRocheleau" rel="me" target="_blank"><img src="img/gowalla.png" /></a>
					</div>
					<div class="sep"></div>
					<ul class="numbers clearfix">
						<li>Reputation<strong>185</strong></li>
						<li>Checkins<strong>344</strong></li>
						<li class="nobrdr">Days Out<strong>127</strong></li>
					</ul>
				</div>
			</div>
			<div class="gcontent">
				<div class="head"><h1>Badges(3)</h1></div>
				<div class="boxy">
					<p>Keep working to unlock badges!</p>
					
					<div class="badgeCount">
						<a href="#"><img src="img/foursquare-badge.png" /></a>
						<a href="#"><img src="img/foursquare-badge.png" /></a>
						<a href="#"><img src="img/foursquare-badge.png" /></a>
					</div>
					
					<span><a href="#">See all…</a></span>
				</div>
			</div>
			<h1>About Me:</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<div class="testimonial">
				<div class="head"><h1>Comments</h1></div>
				<div class="boxy">
					<div class="testimonialList">
						<div class="testimonialInfo">
							<a href="#" class="testiPic"><img src="img/user_avatar.jpg" width="50" height="50" /></a>
							<div class="smalldata">
								<h3>Monkey Guy</h3>
								<ul class="numbers clearfix">
									<li>Stars <strong> 25 </strong></li>
								</ul>
							</div>
							<div class="testimonialBody">
								<p>This is the testimonial body. It is long and it also has auto wrap. This box should be able to adjust automatically
								if in case the paragraph is too long for this space. This sentence you are reading now is just to make sure the box
								adjusts to its length.
								</p>
							</div>
						</div>
					</div>
					<span><a href="#">See all…</a></span>
				</div>
			</div>
		</section>
		
		<section id="right">
			<div class="gcontent">
				<div class="head"><h1>Top Players:
					<select>
						<option value="1">Number of Stars</option>
						<option value="2">Random Option 0</option>
						<option value="3">Random Option 1</option>
						<option value="4">Random Option 2</option>
						<option value="5">Random Option 3</option>
					</select></h1>
				</div>
				<div class="boxy">
					
				<div class="friendslist clearfix">
					<div id="userListContainer">
						<div id="userListContent">
							<a href="#" class="topPic"><img src="img/user_avatar.jpg" width="50" height="50" /></a>
							<div id="smalldata">
								<h3>Monkey Guy</h3>
								<ul class="numbers clearfix">
									<li>Stars <strong> 25 </strong></li>
								</ul>
							</div>
						</div>
						<div id="userListContent">
							<a href="#" class="topPic"><img src="img/user_avatar.jpg" width="50" height="50" /></a>
							<div id="smalldata">
								<h3>Other Monkey 3</h3>
								<ul class="numbers clearfix">
									<li>Stars <strong> 300 </strong></li>
								</ul>
							</div>
						</div>
						<div id="userListContent">
							<a href="#" class="topPic"><img src="img/user_avatar.jpg" width="50" height="50" /></a>
							<div id="smalldata">
								<h3>Monkey with long nam...</h3>
								<ul class="numbers clearfix">
									<li>Stars <strong> 552 </strong></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
					
					<span><a href="#">See all…</a></span>
				</div>
			</div>
			
			<div class="gcontent">
				<div class="head"><h1>Friends List</h1></div>
				<div class="boxy">
					<p>Your friends - 106 total</p>
					
					<div class="friendslist clearfix">
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Jerry K." /></a><span class="friendly"><a href="#">Jerry K.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Katie F." /></a><span class="friendly"><a href="#">Katie F.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Ash K." /></a><span class="friendly"><a href="#">Ash K.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Sponge B." /></a><span class="friendly"><a href="#">Sponge B.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Frank" /></a><span class="friendly"><a href="#">Frank</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Alexa S." /></a><span class="friendly"><a href="#">Alexa S.</a></span>
						</div>
					</div>
					
					<span><a href="#">See all...</a></span>
				</div>
			</div>
		</section>
	</div>
</body>
</html>